<template>
  <div>
    <masonry :cols="6" :gutter="30">
      <div v-for="({id, item}) in items" :key="id" class="masonry-item">
        {{ item }}
      </div>
    </masonry>
    <div>
      <button class="button" @click="add">add</button>
      <button class="button" @click="remove">remove</button>
      <button class="button" @click="swap">swap</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'masonryCss',
  data() {
    return {
      index: 9,
      items: [
        {
          id: '1111111111111111111111111111111111133333333333333333333333333333',
          item: '1111111111111111111111111111111111133333333333333333333333333333'
        },
        { id: 2, item: 2 },
        { id: 3, item: 3 },
        { id: 4, item: 4 },
        { id: 5, item: 5 },
        { id: 6, item: 6 },
        { id: 7, item: 7 },
        { id: 8, item: 8 },
        { id: 9, item: 9 }
      ]
    }
  },
  methods: {
    add() {
      this.index++;
      this.items.push({
        id: this.index,
        item: this.index
      });
    },
    remove() {
      this.items.splice(this.items.length - 1, 1)
    },
    swap() {
      const temp = this.items[this.items.length - 1];
      this.$set(this.items, this.items.length - 1, this.items[0]);
      this.$set(this.items, 0, temp);
    }
  }
}
</script>
